<template>
	<view class="mine-distribution-index">
		
		<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>	
		<view class="space-user-info rel"></view>
		<view class="apply-info ml-lg mr-lg fill-base f-title radius-24" style="z-index:999 !important;position: absolute;">
			<view class="flex-center f-md-title text-bold c-black">忘记密码</view>
			<view class="space-lg"></view>
			<view class="pt-lg pb-md b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont c-warning"></i>
					<view class="text-bold">手机号</view>
				</view>
				<input v-model="subForm.phone" type="text" class="pt-md" maxlength="20"
					placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
			</view>
			<view class="pt-lg pb-md b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont c-warning"></i>
					<view class="text-bold">手机验证码</view>
				</view>
				<input v-model="subForm.short_code" style="width:60%;" type="text" class="pt-md" maxlength="20"
					placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
					<view class="register-get-smscode" @tap="getsmscode">{{ message.text }}</view>
			</view>
			<view class="mt-lg pb-md b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont c-warning"></i>
					<view class="text-bold">密码</view>
				</view>
				<input v-model="subForm.password" type="password" class="pt-md" maxlength="20"
					placeholder-class="c-placeholder" :placeholder="rule[2].errorMsg" />
			</view>
			<view class="mt-lg pb-md b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont c-warning"></i>
					<view class="text-bold">确认密码</view>
				</view>
				<input v-model="subForm.repassword" type="password" class="pt-md" maxlength="20"
					placeholder-class="c-placeholder" :placeholder="rule[3].errorMsg" />
			</view>
			
			<view @tap="submit" class="apply-btn flex-center f-sm-title c-base text-bold radius-16"
				:style="{background:primaryColor}">立即修改</view>
		</view>

		<view class="space-footer">
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				options: {},
				message: {
					text: '获取验证码',
					status: false,
					codeTime: 60
				},
				color: '#ffffff',
				subForm: {
					phone: '',
					short_code: '',
					password: '',
					repassword: ''
				},
				rule: [{
					name: "phone",
					checkType: "isNotNull",
					errorMsg: "请输入您的手机号码",
					regType: 2
				},{
					name: "short_code",
					checkType: "isNotNull",
					errorMsg: "请输入您的手机验证码",
					regType: 2
				}, {
					name: "password",
					checkType: "isNotNull",
					errorMsg: "请输入密码",
					regText: "密码"
				}, {
					name: "repassword",
					checkType: "isNotNull",
					errorMsg: "请重新输入密码",
					regText: "确认密码"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		onLoad(options) {
			console.log(this.userInfo);
			this.options = options
			if(options.pid>0){
				this.subForm.pid=options.pid
			}
			
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
			this.$util.setNavigationBarColor({
				color,
				bg: 'none'
			});
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			autograph: state => state.user.autograph,
			appLogin: state => state.user.appLogin,
			loginType: state => state.user.loginType,
			loginPage: state => state.user.loginPage,
			push_id: state => state.user.push_id,
			userInfo: state => state.user.userInfo,
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
			...mapMutations(['updateConfigItem', 'updateUserItem']),
			async initIndex() {},
			initRefresh() {
				
				this.initIndex()
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				console.log(message, "message");
				return message;
			},
			async getsmscode() {
				if (!/^1[3456789]\d{9}$/.test(this.subForm.phone)) {
					uni.showToast({
						title: '手机号输入有误',
						icon: 'none'
					});
					return false;
				}
				if (this.message.status == true) {
					uni.showToast({
						title: '验证码已发送,请勿重复点击',
						icon: 'none'
					});
					return false;
				}
				let {
					phone
				} = this.subForm
				await this.$api.base['sendsms']({
					phone
				})
				
				this.$util.showToast({
					title: `验证码发送成功`
				})
				
				this.message.status = true;
				this.timerId = setInterval(() => {
					var codeTime = this.message.codeTime;
					codeTime--;
					this.message.codeTime = codeTime;
					this.message.text = codeTime + 's';
					if (codeTime < 1) {
						clearInterval(this.timerId);
						this.message.text = '重新获取';
						this.message.codeTime = 60;
						this.message.status = false;
					}
				}, 1000);
				return false;
				
			},
			async submit() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (this.lockTap) return
				//this.lockTap = true
				this.$util.showLoading()
				
				let methodModel ='editpass';
				console.log(this.$api.base[methodModel])
				let user_info = await this.$api.base[methodModel](param)
				console.log(user_info)
				if(user_info==1){
					this.$util.showToast({
						title: "修改成功，请使用新密码登录"
					})
				}
				this.$util.hideAll()

				setTimeout(() => {
					this.gologin()
				}, 2000)
			},
			gologin(){
				this.$util.goUrl({
					url: `/pages/phonelogin`,
					openType: `navigateTo`
				})
			},
		}
	}
</script>

<style lang="scss">
	.mine-distribution-index {
		.space-user-info {
			top: 0;
			left: 0;
			width: 100%;
			height: 129rpx;
		}
		.mine-index-bg {
			background: rgb(57, 181, 74);
			height: 14.625rem;
			width: 140%;
			left: -20%;
			top: 0;
			
		}
		.apply-info {
			padding: 50rpx;

			.apply-btn {
				width: 590rpx;
				height: 96rpx;
				margin-top: 70rpx;
			}
		}

	}
	
	.register-get-smscode {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: rgb(57, 181, 74);
		font-size: 26rpx;
		text-align: center;
		color: #fff;
		float: right;
		margin-top:-70rpx;
	}
</style>
